
<template>
  <div class="box">
    <div class="title">
      <span class="title_one">
        <b>编制单位选取时间:</b>
        {{detailsInfo.selectionTime}}
      </span>
      <span>
        <b>编制单位选取方式:</b>
        {{detailsInfo.selectionModeName}}
        <!-- <span v-show="detailsInfo.selectionMode=='Z_F_C_G'">政府采购</span>
        <span v-show="detailsInfo.selectionMode=='G_K_Z_B'">公开招标</span>
        <span v-show="detailsInfo.selectionMode=='J_K_S_J_C_Q'">建库随机抽取</span> -->
      </span>
    </div>

    <div class="basicInfo">
      <div class="basicInfo_title">基本信息</div>
      <div class="basicInfo_content">
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div class="basic">
              <strong>单位名称：</strong>{{detailsInfo.unitName}}
            </div>
          </el-col>
          <el-col :span="8">
            <div class>
              <b>单位类型：</b>{{detailsInfo.type}}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic">
              <strong>法定代表人：</strong>{{detailsInfo.legalRepresentName}}
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div>
              <b>统一社会信用代码：</b>{{detailsInfo.uniformSocialCreditCode}}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="basic">
              <strong>资质等级：</strong>{{detailsInfo.level}}
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <b>办公地址：</b>{{detailsInfo.officeAddress}}
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row">
          <el-col :span="8">
            <div class="basic">
              <strong>联系人：</strong>{{detailsInfo.contactName}}
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <b>联系电话：</b>{{detailsInfo.contactMobilePhone}}
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="basicInfo">
      <div class="basicInfo_title">附件信息</div>
      <div class="basicInfo_content basicInfo_fujian">
        <div class="fujianBox" v-if="fujianList.length!=0">
          <div class="bgFujian" v-for="(item,index) in fujianList" :key="index">
            <div class="fujianTitle">{{(index+1)}}.{{item.fileName.substring(0,item.fileName.indexOf('.pdf'))?item.fileName.substring(0,item.fileName.indexOf('.pdf')):item.fileName}}</div>
            <div class="fujianContent">
                <div class="fujianName">
                  <i class="el-icon-document icon"></i>
                  <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top-start">
                    <p class="fujianNamePdf">{{item.fileName}}</p>
                  </el-tooltip>
                </div>
                <div class="isHover">
                  <span @click="btn_see(item,index)">查看</span>
                  <span @click="btn_download(item,index)">下载</span>
                </div>
            </div>
          </div>
        </div>
        <div v-else class="noData">
          暂无数据
        </div>
        <!-- <el-table :data="fujianList" style="width: 100%">
          <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
          <el-table-column prop="fileName" label="类型">
              <template slot-scope="scope">
                <span >{{scope.row.fileName.substring(0,scope.row.fileName.indexOf('.'))}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="btn_see(scope.row.fileName,scope.row.filePath)">查看</el-button>
            </template>
          </el-table-column>
        </el-table> -->
      </div>
    </div>

    <!-- <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <iframe frameborder="0" name="showHere" scrolling="auto" width="100%"
        height="600"
        :src="$https+path"
      ></iframe>
    </el-dialog> -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <span v-show="loadIfram==1" class="iframeLoad">
        加载中
        <div class="el-icon-loading"></div>
      </span>
      <iframe
        id="wode"
        v-show="loadIfram==2"
        frameborder="0"
        name="showHere"
        scrolling="auto"
        width="100%"
        height="600"
        :src="$https+path"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import { getUnitPeople,getDetails } from "@/api/implementUnit";
export default {
  components: {
    xTable
  },
  data() {
    return {
      
      tableData2: [
        { type: "招标文件" },
        { type: "中标通知书" },
        { type: "已签订的合同" }
      ],

      title: "",
      dialogVisible: false,
      needInfo: {
        page: 1,
        size: 5
      },
      totalPage: 0, //总页数
      peopleList: [], //人员信息
      detailsInfo:'',//详情
      fujianList:[],//附件信息
      path:'',
      loadIfram:1
    };
  },
created(){
  this.get_details()
  //this.getPeople()
},
  methods: {
    btn_download(item,index){
      var a = document.createElement("a");
      a.setAttribute("href",this.$https+'/pc/file/download?id='+item.id);
      a.click()
    },
    btn_see(item,index) {
      console.log(item)
      let that=this
      that.title = item.fileName;
      that.path=item.filePath
      that.dialogVisible = true;
      that.$nextTick(()=>{
        var iframe = document.getElementById("wode");
          iframe.onload = function(){
            console.log("加载完成")
            that.loadIfram=2
            console.log(that)
        };
      })
    },
    get_details(){//获取详细信息
      let obj={
        projectId:localStorage.getItem("projectId")
      }
        getDetails(obj).then(res=>{
          console.log(res,'详细信息')
          let arr=[]
          
          if(res.data.tenderingFile!=null){
            arr.push(res.data.tenderingFile)
          }
          if(res.data.winBidFile!=null){
            arr.push(res.data.winBidFile)
          }

          if(res.data.purchaseFile!=null){
            arr.push(res.data.purchaseFile)
          }
          if(res.data.winElectionFile!=null){
            arr.push(res.data.winElectionFile)
          }

          if(res.data.extractNoticeFile!=null){
            arr.push(res.data.extractNoticeFile)
          }
          if(res.data.extractResultNoticeFile!=null){
            arr.push(res.data.extractResultNoticeFile)
          }
          
          if(res.data.contractFile!=null){
            arr.push(res.data.contractFile)
          }
          console.log(arr,'arr')
          this.fujianList=arr
          let times=new Date(res.data.selectionTime)
          res.data.selectionTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日'
          this.detailsInfo=res.data
          
        })
    },
    // getPeople(){//获取项目规划设计与实施方案编制单位下的人员信息
    //   let obj={
    //     projectId:localStorage.getItem("projectId"),
    //     page:this.needInfo.page,
    //     size:this.needInfo.size
    //   }
    //   getUnitPeople(obj).then(res=>{
    //     this.peopleList=res.data.rows
    //     this.totalPage=res.data.total
    //   })
    // },
    // showPage(val) {
    //   console.log(val, "val");
    //   this.needInfo.page = val;
    //   this.getPeople();
    // },
    // showSize(val){
    //   console.log(val, "val");
    //   this.needInfo.size=val
    //   this.getPeople()
    // },
    
  }
};
</script>

<style lang="scss">
.form .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>

.box {
  margin: 30px;
  border: 1px solid #ebebeb;
  .title {
    padding: 10px 30px;
    height: 100px;
    display: flex;
    align-items: center;
    font-size: 14px;
    background: #fff;
    border-radius: 5px;

    span {
      color: #666666;
      b {
        color: #444444;
      }
    }
    .title_one {
      margin-right: 30px;
    }
  }

  .basicInfo {
    .basicInfo_title {
      height: 50px;
      background: #f8f8f8;
      padding: 0px 30px;
      line-height: 50px;
     color: #333;
      font-size: 18px;
      font-weight: bold;
      border-top: 1px solid #ebebeb;
      border-bottom: 1px solid #ebebeb;
    }
    .basicInfo_content {
      padding: 30px 40px;
      .el_row {
        margin-bottom: 30px;
        div {
          font-size: 13px;
          color: #606266;
          display: flex;
          b {
            color: #444444;
            // width: 120px;
            // display: block;
            // text-align: right;
            // margin-right: 10px;
          }
          strong {
            color: #444444;
            // width: 90px;
            // display: block;
            // text-align: right;
            // margin-right: 10px;
          }
        }
      }
    }
    .basicInfo_content_title {
      display: flex;
      // justify-content: space-between;
    }
    .basicInfo_fujian{
      padding: 30px 20px;
    }
  }
}
.pageStyle {
  text-align: center;
  margin: 20px;
}
.iframeLoad {
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.bgFujian{
   padding-bottom: 10px;
   margin-bottom:20px; 
}
.fujianTitle{
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding:10px 20px;
  border-radius: 5px;
}
.fujianContent{
  margin-left: 30px;
  background: #F5F8FA;
  width: 350px;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.fujianName{
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  cursor: pointer;
  margin-right: 20px;
  display: flex;
  align-items: center;
width: 210px;
}
.fujianName .fujianNamePdf {
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.fujianName .icon {
  display: block;
  font-size: 20px;
  margin-right: 10px;
   color: #409EFF;
}

.isHover{
  color: #409EFF;
  font-size: 13px;
  display: none;
  margin-left:20px; 
}
.isHover span{
  padding:0px 3px;
  margin-right: 5px;
  cursor: pointer;
}
.fujianContent:hover .isHover{
  display: block
}
.noData{
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #606266;
  padding: 20px;
}
</style>
